<template>
  <h4>联动 loading</h4>
  <Linkage>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Linkage>
  <h4>上下文 loading</h4>
  <Context>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Context>
  <h4>多接口统一 loading</h4>
  <All>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </All>
  <h4>初始化队列 loading</h4>
  <Queue>
    <template #default="scope">
      <!-- 页面代码 源码 -->
      <dropWrap key="oreo">
        <pre><code class="language-js">{{ scope.html }}</code></pre>
      </dropWrap>
      <!-- 页面代码 源码 -->
    </template>
  </Queue>
</template>

<script setup lang="ts">
import { nextTick } from "vue";

import dropWrap from "../../dropWrap.vue";

import Prism from "prismjs";

import All from "./All.vue";
import Context from "./Context.vue";
import Linkage from "./Linkage.vue";
import Queue from "./Queue.vue";

nextTick(() => {
  Prism.highlightAll();
});
</script>
